import { createRenderer } from '@vue/runtime-core';
import { Graphics, Text, Container, Sprite, Texture } from 'pixi.js'

// 创建一个 renderer
const renderer = createRenderer({
  createElement(type) {
    // 根组件 App 里的虚拟DOM 标签
    // 绘制一个矩形
    // 使用 pixi 
    let element;
    switch (type) {
      case 'Container':
        element = new Container()
        break;
      case 'Sprite':
        element = new Sprite()
        break;
      case 'rect':
        element = new Graphics()
        element.beginFill(0xff0000)  // 红色矩形
        element.drawRect(0,0,500,500)  // x y 宽高
        element.endFill()  // 结束绘制
        break;
      case 'circle':
        element = new Graphics()
        element.beginFill(0xffff00)  // 黄色圆形
        element.drawCircle(0,0,50)  // x y 半径
        element.endFill()  // 结束绘制
        break;
      default:
        break;
    }
    return element
  },
  patchProp(el, key, prevValue, nextValue) {
    // pixi
    // el.x = value
    // el.y = value
    // el[key] = nextValue 测试，只是用来测试文字
    // Texture.from(nextValue) 用来构建一张图片
    switch (key) {
      case 'texture':
        el.texture = Texture.from(nextValue);
        break;
      case 'onClick':
        // pixi 监听 pointertap 来触发点击事件
        el.on('pointertap', nextValue);
        break;
      default:
        el[key] = nextValue;
        break;
    }
  },
  setElementText(node, text) {
    const cText = new Text(text)
    node.addChild(cText)
  },
  createText(text) {
    return new Text(text)
  },
  insert(el, parent) {
    //console.log(el);      // createElement 创建的 canvas
    //console.log(parent);  // pixi 的容器

    // 把元素添加到容器里
    parent.addChild(el)
  },
  // 新加
  // 处理注释
  createComment() {},
  // 获取父节点
  parentNode() {},
  // 获取兄弟节点
  nextSibling() {},
  // 删除节点调用
  remove(el) {
    const parent = el.parent;
    if (parent) {
      parent.removeChild(el)
    };
  }
})

export function createApp(rootComponent) {
  return renderer.createApp(rootComponent)
}